<template>
    <van-cell-group inset class="item-input">
        <van-field v-model="email" center clearable label="绑定新邮箱:" class="id-input">
            <template #button>
                <van-button size="small" type="primary" class="unbind-btn" @click="getCode" v-if="isDable">
                    发送验证码
                </van-button>
                <van-button size="small" type="primary" class="unbind-btn" @click="getCode" v-else="isDable">
                    请{{ times }}s后再试
                </van-button>
            </template>
        </van-field>
    </van-cell-group>

    <van-cell-group inset class="item-input">
        <van-field v-model="code" center required label="确认验证码" placeholder="请输入验证码" class="id-input" />
    </van-cell-group>

    <van-button class="unbind-btn" @click="Save"
        style="color: aliceblue;border-radius:0.8rem;margin: 1.5rem auto;display: block;width: 90%;font-size: 1rem;">
        确&nbsp;&nbsp;认
    </van-button>

    <router-link to="/user/idedit">
        <van-button class="unbind-btn"
            style="color: aliceblue;border-radius:0.8rem;margin: 1.5rem auto;display: block;width: 90%;font-size: 1rem;">
            返&nbsp;&nbsp;回
        </van-button>
    </router-link>
</template>

<script setup>
const { proxy } = getCurrentInstance();
const user = proxy.$user.value;

const times = ref(60); // 验证码倒计时
const isDable = ref(true); // 验证码是否可用
const email = ref(); // 邮箱
const code = ref(); // 验证码

// 验证码发送和倒计时功能
const getCode = async (type) => {
    if (!email.value) {
        proxy.$fail('请输入邮箱号')
        return false
    }
    if (isDable.value === false) {
        proxy.$fail(`验证码已发送,${times.value}s后可重新发送`)
        return false
    } else {
        const data = {
            email: email.value,
            type: 'login'
        }

        const res = await proxy.$http.post({
            url: '/code/send',
            params: data,
        })

        if (res.code === 1) {
            proxy.$success('验证码发送成功,请注意查收')
        } else {
            proxy.$fail(res.msg)
            return
        }
    }
    isDable.value = false
    // 定时器
    const timer = setInterval(() => {
        times.value--
        if (times.value <= 0) {
            clearInterval(timer) // 清除定时器
            isDable.value = true
            times.value = 60
        }
    }, 1000)

}

//更换请求
const Save = async () => {
    const data = {
        id: user.id,
        email: email.value,
        code: code.value,
    }
    const res = await proxy.$http.post({
        url: '/user/editemail',
        params: data,
    })

    if (res.code == 1) {
        proxy.$success('邮箱绑定成功')
        setTimeout(() => {
            proxy.$router.push('/user/idedit')
        }, 1000);
    } else {
        proxy.$fail(res.msg)
    }
}
</script>

<style scoped>
/* 解决滚动条问题：重置页面默认边距 */
::v-deep body {
    margin: 0;
    padding-bottom: 1rem;
}

.item-input {
    /* 将cqb替换为rem单位，避免布局异常 */
    margin-top: 2rem;
    border-radius: 0.75rem;
    /* 移除固定高度，让内容自然撑开 */
}

.unbind-btn {
    background: linear-gradient(-45deg,
            rgba(190, 27, 27, 0.6),
            rgba(41, 189, 203, 0.7),
            rgba(53, 113, 196, 0.8),
            rgba(195, 40, 169, 0.7),
            rgba(202, 32, 88, 0.6));
    background-size: 300% 300%;
    animation: fluidGradient 8s ease infinite;
    transition: all 0.5s ease;
}

.id-input {
    font-size: 1rem;
    border-radius: 0.75rem;
    background: linear-gradient(-45deg,
            rgba(53, 167, 118, 0.6),
            rgba(83, 154, 160, 0.7),
            rgba(63, 104, 161, 0.8),
            rgba(134, 58, 158, 0.7),
            rgba(202, 69, 118, 0.6));
    background-size: 300% 300%;
    animation: fluidGradient 8s ease infinite;
    transition: all 0.5s ease;
}

.id-input:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

@keyframes fluidGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

p {
    text-indent: 1rem;
    margin: 1.5rem 0;
    background: linear-gradient(90deg,
            rgba(209, 64, 64, 0.8),
            rgba(117, 250, 255, 0.9),
            rgba(255, 77, 181, 0.8));
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 2px 4px rgba(255, 77, 181, 0.2);
    animation: gradientMove 8s ease infinite;
}

@keyframes gradientMove {
    0% {
        background-position: 0% center;
        text-shadow: 0 2px 4px rgb(250, 71, 71);
    }

    50% {
        background-position: 100% center;
        text-shadow: 0 3px 6px rgb(93, 188, 243);
    }

    100% {
        background-position: 0% center;
        text-shadow: 0 2px 4px rgba(244, 70, 171, 0.2);
    }
}
</style>
